<template>
  <div>
    <div class="table">
      <div class="titlebox">
        <div class="text"></div>
        <div
          class="right"
          :style="{ alignItems: 'center', lineHeight: '32.5px' }"
        >
          <button
            type="primary"
            size="small"
            class="bewdao daochu"
            @click="oepnDialog"
          >
            新增
          </button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span
              @click="shuaxin"
              :style="{ cursor: 'pointer', fontSize: '20px' }"
              ><i class="el-icon-refresh-right"></i
            ></span>
          </el-tooltip>
          <el-dropdown trigger="click" @command="command">
            <span class="el-dropdown-link">
              <el-tooltip
                class="item"
                effect="dark"
                content="密度"
                placement="top"
              >
                <span :style="{ cursor: 'pointer', fontSize: '20px' }"
                  ><i class="el-icon-d-caret"></i
                ></span>
              </el-tooltip>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="dropdown-list" command="默认"
                >默认</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="中等"
                >中等</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="紧凑"
                >紧凑</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        style="width: 100%"
        height="350px"
        border
        id="exportTabyong"
        ref="table"
        :size="iissize"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center',
        }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column align="left" prop="treeviewCode" label="层次树编码">
        </el-table-column>
        <el-table-column align="left" prop="treeviewName" label="层次树名称">
        </el-table-column>
        <el-table-column align="center" width="200" label="操作">
          <template slot-scope="scope">
            <div class="table-cz">
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                  margin-right: 20px;
                "
                class="el-icon-edit"
                @click="edit(scope.row)"
              ></i>
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="del(scope.row)"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :show-close="true"
      :visible.sync="tableVisible"
      v-if="tableVisible"
      width="500px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      <el-form
        ref="modleTreeForm"
        :rules="treeRules"
        :model="dialogForm"
        label-width="110px"
      >
        <el-form-item label="层次树编码" prop="treeviewCode">
          <el-input :disabled='isEdit' v-model="dialogForm.treeviewCode"></el-input>
        </el-form-item>
        <el-form-item label="层次树名称" prop="treeviewName">
          <el-input v-model="dialogForm.treeviewName"></el-input>
        </el-form-item>
        <el-form-item label="全局过滤条件" prop="filterCond">
          <el-input
            v-model="dialogForm.filterCond"
            type="textarea"
            :rows="4"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  addModleTreeApi,
  delModleTreeApi,
  editModleTreeApi,
  getAddTreeModelListApi,
  getTreeModelDataApi
} from '@/api/Model-all/Model-tree'
export default {
  name: 'ModelTreeTable',
  components: {},
  data () {
    return {
      iissize: 'medium',
      loading: false,
      loading2: false,
      isEdit: false,
      tableList: [],
      addRelationList: [],
      form: {},
      dialogForm: {},
      treeRules: {
        treeviewCode: [
          { required: true, message: '请输入层次树编码', trigger: 'blur' }
        ],
        treeviewName: [
          { required: true, message: '请输入层次树名称', trigger: 'blur' }
        ]
      },
      tableConfig: [
        {
          align: 'left',
          prop: 'classCode',
          label: '类编码'
        },
        {
          align: 'left',
          prop: 'className',
          label: '类名称'
        }
      ],
      filterText: '',
      tableVisible: false
    }
  },
  mounted () {
    this.getTreeModelList()
  },
  methods: {
    // 获取模型层次树列表
    async getTreeModelList () {
      this.loading = true
      const res = await getAddTreeModelListApi()
      this.tableList = res.data.list
      this.loading = false
    },

    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async oepnDialog () {
      this.isEdit = false
      this.tableVisible = true
    },
    async edit (item) {
      console.log(item)
      this.isEdit = true
      const res = await getTreeModelDataApi(item.treeviewId)
      const { filterCond, treeviewCode, treeviewName, treeviewId } = res.data.entity
      this.$set(this.dialogForm, 'filterCond', filterCond)
      this.$set(this.dialogForm, 'treeviewCode', treeviewCode)
      this.$set(this.dialogForm, 'treeviewName', treeviewName)
      this.$set(this.dialogForm, 'treeviewId', treeviewId)
      this.tableVisible = true
    },
    async del (item) {
      console.log(item)
      this.$confirm('请确认是否删除该层次树节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delModleTreeApi(item.treeviewId)
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration: 2000
            })
            this.getTreeModelList()
          } else {
            this.$message({
              type: 'error',
              message: res.message,
              duration: 2000
            })
          }
        })
        .catch((action) => {
          if (action === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除',
              duration: 2000
            })
          }
        })
    },

    diaClose () {
      this.tableVisible = false
      this.dialogForm = {}
    },
    chongzhi () {
      this.filterText = ''
      this.getAddRelationList()
    },
    shuaxin () {
      this.getTreeModelList()
      this.$message({
        type: 'error',
        message: '列表刷新成功',
        duration: 2000
      })
    },
    async submit () {
      await this.$refs.modleTreeForm.validate()
      const res = this.isEdit ? await editModleTreeApi(this.dialogForm) : await addModleTreeApi(this.dialogForm)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.diaClose()
        this.getTreeModelList()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.button {
  width: 63px;
  height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.chaxun {
  background-color: #1890ff;
  color: #fff;
}
.top {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .group-select {
      width: 200px;
      margin-right: 10px;
    }
    .group-add {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      width: 25px;
      height: 25px;
      margin-right: 20px;
    }
    .search {
      display: flex;
      align-items: center;
      width: 200px;
    }
  }
}
.table {
  .titlebox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .text {
      font-size: 16px;
    }
    .right {
      align-items: center;
      i {
        margin-left: 10px;
      }
      .bewdao {
        width: 63px;
        height: 32px;
        margin-right: 20px;
      }
      .daochu {
        background-color: #1890ff;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
    }
  }
}
</style>
